<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>公告列表</span>
            </div>
        </template>
        <el-table :data="datas">
            <el-table-column width="40" label="#" prop="id" />
            <el-table-column label="标题" prop="title" />
            <el-table-column label="发布日期" prop="create_time" />
            <el-table-column label="更新日期" prop="update_time" />
            <el-table-column label="是否置顶" prop="is_sticky">
                <template #default="scope">
                    <el-tag :type="color(scope.row.is_sticky)">
                        {{text(scope.row.is_sticky)}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-link :href="`#/Announcement/Edit/${scope.row.id}`">
                        <el-button size="small" type="primary" plain>
                            <el-icon>
                                <EditPen/>
                            </el-icon>编辑
                        </el-button>
                    </el-link>

                    <el-button @click="top(scope.row.id,scope.row.is_sticky)" size="small" type="success" plain>
                        <el-icon>
                            <EditPen />
                        </el-icon>置顶
                    </el-button>
                    <el-button @click="remove(scope.row.id)" size="small" type="danger" plain>
                        <el-icon>
                            <Delete />
                        </el-icon> 删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup>
import { reactive, ref } from 'vue'
import announce from '@/api/announce'

let datas = ref([]);

async function loadList() {
    let { status, msg, data } = await announce.list();
    if (status) {
        datas.value = data;
    } else {
        ElMessage(msg);
    }
}
loadList();
//变色变字
let color = (is_sticky) => {
    if (is_sticky === 1) return 'success';
    return 'error';
}
let text = (is_sticky) => {
    if (is_sticky === 1) return '开启';
    return '关闭';
}

let top = async (id, is_sticky) => {
    is_sticky = is_sticky ^ 1;
    let { status, msg } = await announce.stick({ id, is_sticky: is_sticky });
    if (status) {
        ElMessage.success(msg);
        loadList();
    } else {
        ElMessage.error(msg);
    }
}
let remove = async (id) => {
    let { status, msg } = await announce.remove({ id });
    if (status) {
        ElMessage.success(msg);
        loadList();
    } else {
        ElMessage.error(msg);
    }
}
</script>